import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/components/common/detail_item.dart';
import 'package:cbec_app/components/goods/goods_discount_item.dart';
import 'package:cbec_app/utils/logger.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class DiscountDetailPopup extends StatefulWidget {
  const DiscountDetailPopup({super.key});

  @override
  State<StatefulWidget> createState() {
    return _DiscountDetailPopupState();
  }
}

var detailOverlay = null;

class _DiscountDetailPopupState extends State<DiscountDetailPopup> with SingleTickerProviderStateMixin {
  AnimationController animationController = AnimationController(vsync: _DiscountDetailPopupState());
  late Animation<double> animation;
  late Animation<double> changeSize;
  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      duration: const Duration(milliseconds: 250),
      reverseDuration: const Duration(milliseconds: 200),
      vsync: this,
    );
    animation = Tween(begin: 0.0, end: 1.0).chain(CurveTween(curve: Curves.ease)).animate(animationController)
      ..addListener(() {
        setState(() {});
      });
    changeSize = Tween(begin: 0.0, end: 460.h).animate(animationController);

    animationController.addStatusListener((AnimationStatus status) {
      //执行完成后反向执行
      if (status == AnimationStatus.completed) {
        // _controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        detailOverlay.remove();
        detailOverlay.dispose();
        detailOverlay = null;
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animationController,
        builder: (context, child) {
          return Opacity(
              opacity: animation.value,
              child: BaseInteractive(
                childWidget: Container(
                  color: Colors.black.withOpacity(0.5),
                  margin: EdgeInsets.only(bottom: 124.h),
                  child: Stack(
                    children: [
                      Positioned(
                          bottom: 0,
                          left: 0,
                          child: BaseInteractive(
                            childWidget: Container(
                                width: 375.w,
                                height: changeSize.value,
                                decoration: const BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)), color: Color(0xffF3F5F7)),
                                child: Stack(
                                  children: [
                                    Container(
                                      width: 375.w,
                                      height: 75.h,
                                      decoration: const BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)), color: Color(0xffFF4840)),
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.center,
                                        children: [
                                          Text(
                                            '优惠明细',
                                            style: setTextStyle(15, FontWeight.w700, Colors.white),
                                          ),
                                          Padding(
                                            padding: EdgeInsets.only(top: 10.h),
                                            child: Text('已享跨店满减，买的多省的多', style: setTextStyle(15, FontWeight.w700, Colors.white)),
                                          )
                                        ],
                                      ),
                                    ),
                                    Positioned(
                                        right: 18,
                                        top: 18,
                                        child: BaseInteractive(
                                          childWidget: const Icon(
                                            Icons.close,
                                            color: Colors.white,
                                          ),
                                          onClick: () {
                                            _removePopup();
                                          },
                                        )),
                                    Container(
                                      width: 367.w,
                                      height: 140.h,
                                      decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.only(topLeft: Radius.circular(8), bottomLeft: Radius.circular(8))),
                                      margin: EdgeInsets.only(top: 85.h, left: 8),
                                      child: SingleChildScrollView(
                                        scrollDirection: Axis.horizontal,
                                        child: Row(
                                            children: List.generate(
                                                5,
                                                (index) => Container(
                                                      margin: EdgeInsets.only(top: 10.h, left: 8.w),
                                                      child: const GoodsDiscountItem(),
                                                    )).toList()),
                                      ),
                                    ),
                                    Container(
                                      margin: EdgeInsets.only(top: 235.h, left: 8, right: 8),
                                      height: 220.h,
                                      width: 359.w,
                                      decoration: const BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(8))),
                                      child: const Column(
                                        children: [
                                          DetailItem(
                                            label: '商品总额',
                                            content: '￥168',
                                            labelStyle: LabelStyle.title,
                                            contentStyle: ContentStyle.title,
                                          ),
                                          DetailItem(
                                            label: '满减',
                                            content: '￥168',
                                            contentStyle: ContentStyle.discount,
                                          ),
                                          DetailItem(
                                            label: '税费',
                                            content: '￥168',
                                            contentStyle: ContentStyle.discount,
                                          ),
                                          DetailItem(
                                            label: '整单',
                                            content: '￥168',
                                            contentStyle: ContentStyle.discount,
                                          ),
                                          DetailItem(
                                            label: '特价/拼团/秒杀优惠',
                                            content: '￥168',
                                            contentStyle: ContentStyle.discount,
                                          ),
                                          DetailItem(
                                            label: '运费',
                                            content: '￥168',
                                            contentStyle: ContentStyle.discount,
                                          ),
                                          DetailItem(
                                            label: '优惠券',
                                            content: '无可用',
                                            contentStyle: ContentStyle.nextMore,
                                          ),
                                          DetailItem(
                                            label: '共减',
                                            labelStyle: LabelStyle.title,
                                            content: '￥168',
                                            contentStyle: ContentStyle.discountTotal,
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                )),
                            onClick: () {},
                          ))
                    ],
                  ),
                ),
                onClick: () {
                  _removePopup();
                },
              ));
        });
  }

  ///显示弹窗
  void _createPopup(BuildContext context1) {
    detailOverlay = OverlayEntry(
      builder: (context) {
        return const DiscountDetailPopup();
      },
    );
    Overlay.of(context1).insert(detailOverlay);
    animationController.forward();
  }

  ///隐藏弹框
  void _removePopup() {
    animationController.reverse();
  }
}

///显示/隐藏优惠明细
void toggleDiscountDetail(BuildContext context) {
  if (detailOverlay == null) {
    _DiscountDetailPopupState()._createPopup(context);
  } else {
    _DiscountDetailPopupState()._removePopup();
  }
}
